<template>
  <div>
    <div class="top" v-if="circleId">
      <div class="top-header">
        <div class="youlive">
          <div>分享你的点滴生活</div>
          <div class="draft" @click="gotodraft">
            <Icon type="ios-calendar-outline" />草稿箱
          </div>
        </div>
      </div>
      <Form
        style="padding-top: 10px"
        ref="formValidate"
        :label-width="0"
        :model="formValidate"
        :rules="ruleValidate"
      >
        <FormItem label="" prop="titleText">
          <Input
            v-model="formValidate.titleText"
            maxlength="20"
            style="width: 400px"
            placeholder="请填写标题(必填，最多20字)"
          ></Input>
        </FormItem>
        <FormItem label="" prop="contText">
          <Input
            v-model="formValidate.contText"
            type="textarea"
            maxlength="300"
            placeholder="请填写正文(必填)"
          ></Input>
        </FormItem>
      </Form>
      <div class="live">
        <div class="live-left">
          <Poptip
            placement="bottom-start"
            popper-class="popCla"
            width="400"
            word-wrap
          >
            <Icon type="ios-paper-outline" />图片
            <div class="text type-box" slot="content">
              <div class="sub-box">
                <div
                  class="demo-upload-list"
                  v-for="(img, index) in uploadList"
                  :key="index"
                >
                  <img :src="img" />
                  <div class="demo-upload-list-cover">
                    <!--<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>-->
                    <Icon
                      type="ios-trash-outline"
                      @click.native="handleRemove(index)"
                    ></Icon>
                  </div>
                </div>
                <Upload
                  :show-upload-list="false"
                  :on-success="handleSuccess"
                  :on-format-error="handleSuccessLu"
                  :before-upload="handleBeforeUpload"
                  :format="['jpg', 'jpeg', 'png']"
                  :action="action"
                  :headers="accessToken"
                  style="display: inline-block; width: 60px"
                >
                  <div
                    class="hover-pointer icon-upload"
                    style="
                      width: 60px;
                      height: 60px;
                      text-align: center;
                      line-height: 60px;
                    "
                  >
                    <Icon type="ios-camera" size="20"></Icon>
                  </div>
                </Upload>
              </div>
            </div>
          </Poptip>
          <Poptip
            placement="bottom-start"
            popper-class="popCla"
            width="400"
            style="margin-left: 20px"
          >
            <Icon type="logo-youtube" />视频
            <div class="text type-box" slot="content">
              <div class="sub-box">
                <div
                  class="demo-upload-list"
                  style="width: 100px"
                  v-for="(img, index) in uploadListVideo"
                  :key="index"
                >
                  <video style="width: 100px" :src="img"></video>
                  <div class="demo-upload-list-cover">
                    <!--<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>-->
                    <Icon
                      type="ios-trash-outline"
                      @click.native="handleRemoveVideo(index)"
                    ></Icon>
                  </div>
                </div>
                <Upload
                  :show-upload-list="false"
                  :on-success="handleSuccessVideo"
                  :on-format-error="handleSuccessVideoLu"
                  :before-upload="handleBeforeUploadVideo"
                  :format="['mp4', 'avi']"
                  :action="action"
                  :headers="accessToken"
                  style="display: inline-block; width: 60px"
                >
                  <div
                    class="hover-pointer icon-upload"
                    style="width: 100px; height: 100px; text-align: center"
                  >
                    <div style="padding: 5px 0">
                      <span style="font-size: 16px">上传视频</span>
                      <span style="color: #999999"
                      >支持上传MP4格式文件，不超过1GB</span
                      >
                    </div>
                    <div
                      style="
                        padding-top: 10px;
                        border: 1px #e8e8e8 solid;
                        width: 60px;
                        height: 60px;
                        color: #999999;
                      "
                    >
                      <div>上传视频</div>
                      <Icon type="md-add" size="20"></Icon>
                    </div>
                  </div>
                </Upload>
              </div>
            </div>
          </Poptip>
        </div>
        <div class="live-right">
          <Cascader
            :data="typeList"
            v-model="value1"
            :load-data="loadData"
            @on-change="casChange"
          >
            <div class="defult">
              <div>
                {{ defultcircle }}
              </div>
              <Icon type="ios-arrow-down"></Icon>
            </div>
          </Cascader>
          <!-- <Dropdown trigger="click" class="drop">
            <div class="defult">
              <div>{{ select }}</div>
              <Icon type="ios-arrow-down"></Icon>
            </div>
            <DropdownMenu slot="list" class="dropMenu">
              <DropdownItem
                v-for="(item, index) in list"
                :key="index"
                class="dropItem"
                @click.native="selectItem(item, index)"
              >
                <Icon
                  :type="item.icon"
                  class="icon"
                  size="20"
                  :color="item.color"
                />
                <div class="title">{{ item.name }}</div>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown> -->
          <button class="sub" @click="handleSubmit('formValidate')">
            发布
          </button>
        </div>
      </div>
    </div>
    <div class="choosecircle">
      <div class="choosecircle-center">
        <div class="choosecircle-first">
          <!-- <img class="choosecircle-img" :src="chooiseCircle.thumb" /> -->
          <Avatar
              shape="square"
              class="choosecircle-img"
              @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
              :src="chooiseCircle.thumb"
              icon="ios-person"
              size="40"
           />
          <div class="choosecircle-span">
            <div class="circle-name">{{ chooiseCircle.title }}</div>
            <div>{{ chooiseCircle.member_num }} 成员</div>
          </div>
        </div>
        <div class="join">
          <div class="add" v-if="chooiseCircle.into == 0">加入</div>
          <div class="added" v-if="chooiseCircle.into == 1">√已加入</div>
        </div>
      </div>
    </div>
    <!-- 查看全部的板块 -->
    <div class="mycircle" v-if="!circleId">
      <div class="mycircle-top">
        <span> 我的圈子 </span>
        <div class="mycircle-circle" @click="gotocircle">查看全部</div>
      </div>
      <div class="mycircle-center">
        <div class="mycircle-first" v-for="(item, index) in datat" :key="index" @click="toDetail(item)">
          <img class="mycircle-img" :src="item.thumb" />
          <div class="mycircle-span">
            <span>{{ item.title }}</span>
            <span> {{ item.member_num }} 成员</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容信息 -->
    <div
      class="center"
      v-for="(item, index) in data"
      :key="index"
    >
      <div class="container">
        <div class="container-top">
          <div class="container-top-img" @click="getcircleId(item)">
            <!-- <img :src="item.face" /> -->
            <div @click="toPersonalDetail(item)">
              <Avatar
            @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                shape="circle"
                :src="item.face"
                icon="ios-person"
                size="28"
              />
            </div>
          </div>
          <div class="container-top-center" @click="handleDetail(item)">
            <div class="container-top-true">
              <div class="container-top-title">
                <div class="container-top-one">
                  <span>{{ item.qtitle }}</span>
                  <!-- <div class="container-lable-yd">
                    <span>{{ item.title }}</span>
                  </div> -->
                </div>
                <div class="container-top-two">
                  <div>{{ item.nick_name }}</div>
                  <div class="fabu">发布了</div>
                </div>
              </div>
              <div class="container-contoin">{{ item.content }}</div>
              <div class="main-container" v-if="item.type == 1&&item.thumbs">
                <img
                  class="main-img"
                  v-for="(v, i) in item.thumbs.split(',')"
                  :key="i"
                  :src="v"
                  alt=""
                />
              </div>
              <div class="container-video" v-if="item.type == 2&&item.video_url">
                <video controls class="video-bb" :src="item.video_url"></video>
              </div>
            </div>
          </div>
        </div>
        <div class="container-but">
          <div class="ribbon" @click="collect(item.id, 2)">
            <!-- <Icon type="ios-star-outline" /> <span>{{ item.is_sc }}</span> -->
            <Icon :type="item.havesc===1? 'md-star':'ios-star-outline'"
             :color="item.havesc===1?'#FDCD10':''" /> <span>{{ item.is_sc }}</span>
          </div>
          <div class="ribbon" @click="collect(item.id, 3)">
            <Icon type="ios-share-outline" /> <span>{{ item.is_zf }}</span>
          </div>
          <div class="ribbon" @click="handleDetail(item)">
            <Icon type="ios-text-outline" /> <span>{{ item.is_comits }}</span>
          </div>
          <div class="ribbon npk" @click="collect(item.id, 1)">
            <Icon type="ios-thumbs-up" color="#fdcd10"  v-show="item.havedz"/>
          <Icon type="ios-thumbs-up-outline"  v-show="!item.havedz"/> <span>{{ item.is_like }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  quanzifollwo,
  ourquanzi,
  setdlc,
  getCircle,
  getChosList,
  getChosStatus,
  setChosInfo, } from "@/api/community";
import { time } from "@/config/time";
import { commonUrl } from "@/plugins/request";
export default {
  data() {
    return {
      datat: [],
      data: [],
      value: "",
      subtype: 0,
      circleId: false,
      chooiseCircle: {},
      mid: JSON.parse(localStorage.userInfo).id,
      value1: ["0"],
      defultcircle: "公开的",
      typeList: [
        {
          value: "0",
          label: "公开的",
          children: [],
        },
        {
          value: "1",
          label: "同步圈子",
          children: [],
          loading: false,
        },
        {
          value: "2",
          label: "仅自己可见",
          children: [],
        },
        {
          value: "3",
          label: "草稿",
          children: [],
        },
      ],
      formValidate: {
        titleText: "",
        contText: "",
      },
      ruleValidate: {
        titleText: [
          {
            required: true,
            message: "请填写标题(必填，最多20字)",
            trigger: "blur",
          },
        ],
        contText: [
          { required: true, message: "请填写正文(必填)", trigger: "blur" },
        ],
      },
      action: commonUrl + "/common/common/upload/file", // 上传地址
      accessToken: {}, // 验证token
      uploadList: [],
      uploadListVideo: [],
    };
  },
  props:{
    seachVal: {
      type: String,
      required: ''
    }
  },
  beforeDestroy() {
    if(this.formValidate.titleText && this.formValidate.contText) {
      this.handleSubmit('formValidate',3)
    }
  },
  watch: {
    "seachVal": {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        this.getcircleList();
      },
      deep: true
    },
    "$route.query.id"(val) {
      this.circleId = this.$route.query.id;
      if(val) {
        // this.circleId = this.$route.query.id;
        // 根据Id获取圈子详情
        this.getcirleInfo();
      } else {
         // 我加入的圈子发布的帖子
         this.getcircleList();
        // 我加入的圈子数量列表
        this.getmycircle();
      }
    }
  },
  created() {
    if (this.$route.query.id) {
      this.circleId = this.$route.query.id;
       // 根据Id获取圈子详情
      this.getcirleInfo();
    } else {
      // 我加入的圈子发布的帖子
      this.getcircleList();
        // 我加入的圈子数量列表
        this.getmycircle();
    }
  },
  mounted() {
    this.accessToken.accessToken = localStorage.getItem('accessToken');

  },
  methods: {
    toPersonalDetail(item) {
      this.$router.push({
        path: '/personalpage',
        query: {
          aouthid: item.aouthid
        }
      })
    },
    toDetail(item) {
      this.$router.push({
        path: '/circle',
        query: {
          id: item.id
        }
      })
    },
    casChange(val) {
      if (val[0] == "1") {
        let params = {
          id: val[1],
          mid:JSON.parse(localStorage.userInfo).id,

        };
        getChosStatus(params).then((res) => {
          if(res.code === 1) {
            if(res.type === 2) {
              this.$Modal.info({
                  title: '提示',
                  content:  '该圈子发帖需要审核'
               });
            }
            if(res.type === 1) {
              this.$Modal.info({
                  title: '提示',
                  content:  '该圈子不能发帖'
               });
            }

          }

          // if (res.code !== 1) this.$Message.error(res.msg || "该圈子不能发表!");
        });
      }
      if (val[0]) {
        this.defultcircle = this.typeList.filter((a) => {
          return a.value == val[0];
        })[0].label;
      }
      if (val[0] && val[1]) {
        this.defultcircle =
          this.typeList.filter((a) => {
            return a.value == val[0];
          })[0].label +
          "·" +
          this.typeList[1].children.filter((a) => {
            return a.value == val[1];
          })[0].label;
      }
    },
    loadData(item, callback) {
      item.loading = true;
      setTimeout(() => {
        if (item.value == "1") {
          let fow = {
            id: 1,
            mid: JSON.parse(localStorage.userInfo).id,
            page: 1,
            pagesize: 1000
          };
          getChosList(fow).then((res) => {
            if (res.code == 1) {
              item.children = res.data.map((a) => {
                return {
                  value: a.id,
                  label: a.title,
                };
              });
              item.loading = false;
              callback();
            } else {
              this.$Message.error(res.msg || "获取圈子失败!");
            }
          });
        }
      }, 1000);
    },
    // 上传图片
    handleRemove(index) {
      // 移除图片
      this.uploadList.splice(index, 1);
      this.$forceUpdate();
    },
    //上传失败
    handleSuccessLu(error, file, fileList){
      this.$Notice.warning({
        title: "请上传正确的图片格式",
      });
    },
    handleSuccess(res, file) {
      // 上传成功回调
      this.uploadList.push(res.result);
      this.$forceUpdate();
    },
    handleBeforeUpload() {
      // 上传之前钩子函数
      const check = this.uploadList.length <= 6;
      if (!check) {
        this.$Notice.warning({
          title: "最多可以上传六张图片",
        });
        return check;
      }
    },
    //上传视频
    handleRemoveVideo(index) {
      // 移除图片
      this.uploadListVideo.splice(index, 1);
      this.$forceUpdate();
    },
    //上传失败
    handleSuccessVideoLu(error, file, fileList){
      this.$Notice.warning({
        title: "请上传正确的MP4视频格式",
      });
    },
    handleSuccessVideo(res, file) {
      // 上传成功回调
      this.uploadListVideo.push(res.result);
      this.$forceUpdate();
    },
    handleBeforeUploadVideo() {
      // 上传之前钩子函数
      const check = this.uploadListVideo.length < 3;
      if (!check) {
        this.$Notice.warning({
          title: "最多可以上传3张图片",
        });
        return check;
      }
    },
    //发布分享
    handleSubmit(name,push_status) {
      let params = {
        mid: JSON.parse(localStorage.userInfo).id,
        title: this.formValidate.titleText,
        content: this.formValidate.contText,
        push_status:push_status|| this.value1[0] || "",
        circlelist_id: this.value1[1] || "",
        act_id: "",
        thumbs: this.uploadList.join(","),
        video_url: this.uploadListVideo.join(","),
        type: this.uploadListVideo.join(",") ? 2 :1
      };
      this.$refs[name].validate((valid) => {
        if (valid) {
          setChosInfo(params).then((res) => {
            if (res.code == "1") {
              this.$Message.success("发布成功");
              this.formValidate = {
                titleText: "",
                contText: "",
              }
              this.getcirleInfo()
            } else {
              this.$Message.error(res.msg || "发布失败!");
            }
          });
        }
      });
    },
    // 头部获取我加入的圈子
    getmycircle() {
      ourquanzi({
        mid: this.mid,
        page: 1,
        pagesize: 3,
      }).then((res) => {
        this.datat = res.circledata
      });
    },
    // 获取圈子详情
    getcircleList() {
      let npk = {
        mid: this.mid,
        page: 1,
        pagesize: 10000,
        keyword:this.seachVal || ''
      };
      quanzifollwo(npk).then((res) => {
        this.data = res.circledata;
        // this.data=res.data
        // this.data.map((v) => {
        //     v.creattime = time.getTime(v.creattime);
        //   })
        // q12e12
      })
    },
    // 一键三连
    collect(id, type) {
      let data = {
        topicid: id,
        type: type,
        // mid: uni.getStorageSync("user_info_obj_dev").id,
        mid: this.mid,
      };
      setdlc(data).then((res) => {
        if (res.code == 1) {
          if(this.$route.query.id) {
            this.getcirleInfo();
          } else {
            this.getcircleList();
          }

        }
      });
    },
    // 根据Id获取圈子详情
    getcircleId(item) {
      this.chooiseCircle = item;
      this.circleId = item.circlelist_id;
      this.defultcircle = item.qtitle;
      this.getcirleInfo();
    },
    // 根据Id获取圈子详情
    getcirleInfo() {
      let data = {
        mid: this.mid,
        id: this.circleId,
        page: 1,
        pagesize: 100000,
      };
      getCircle(data).then((res) => {
        if (res.code == 1) {
          this.chooiseCircle = res.circleinfo;
          this.data = res.data
        }
      });
    },
    // 详情
    handleDetail(v) {
      this.$router.push({
        path: "/circle-detail",
        query: {
          id: v.id,
        },
      });
    },
    // 选择发帖方式
    format(labels, selectedData) {
      const index = labels.length - 1;
      const data = selectedData[index] || false;
      if (data.value == "more") {
        this.$router.push({
          path: "/circle",
        });
      } else if (data) {
        this.defultcircle = labels[index];
      }
    },
    checkType(type) {
      this.subtype = type;
    },
    // 跳转到草稿箱
    gotodraft(item) {
      this.$router.push({
        path: "/draft",
        query: item.id,
      });
    },
    // 跳转圈子
    gotocircle() {
      this.$router.push({
        path: "/joincircle",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  .top {
    background-color: #fff;
    padding: 10px;
    .top-header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .youlive {
        width: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        span {
          // display: inline-block;
          width: 100%;
        }
        .draft {
          cursor: pointer;
        }
      }
      .top-header-input {
        width: 100%;
        padding: 10px 0;
        ::v-deep.top-input {
          margin: 10px 0;
          width: 100% !important;
        }
      }
    }
    .textarea {
      width: 100%;
      height: 100px;
      // border: 1px solid #f00;
      outline: #f00;
      padding: 10px;
      resize: none;
    }
    .live {
      display: flex;
      justify-content: space-between;
      .live-left,
      .live-right {
        display: flex;
      }
      .live-left {
        .popCla {
          .type-box {
            display: flex;
            align-items: center;
            cursor: pointer;
            .sub-box {
              display: flex;
              align-items: center;
              .demo-upload-list {
                display: inline-block;
                width: 60px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                border: 1px solid transparent;
                border-radius: 4px;
                overflow: hidden;
                background: #fff;
                position: relative;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
                margin-right: 4px;
              }
              .demo-upload-list img {
                width: 100%;
                height: 100%;
              }
              .demo-upload-list-cover {
                display: none;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.6);
              }
              .demo-upload-list:hover .demo-upload-list-cover {
                display: block;
              }
              .demo-upload-list-cover i {
                color: #fff;
                font-size: 20px;
                cursor: pointer;
                margin: 0 2px;
                z-index: 9999;
              }
            }
          }
        }
        .video {
          /*margin-left: 20px;*/
        }
      }
      .live-right {
        // .drop {
        cursor: pointer;
        .defult {
          display: flex;
          align-items: center;
        }
        .dropMenu {
          .dropItem {
            display: flex;
            align-items: center;
            .icon {
              width: 20px;
            }
            .title {
              flex: 1;
              text-align: center;
            }
          }
        }
        // }
        .sub {
          cursor: pointer;
          color: #fff;
          background-color: #f00;
          border: none;
          width: 80px;
          height: 20px;
          margin-left: 30px;
        }
      }
    }
  }
.choosecircle {
  margin-top: 10px;
  .choosecircle-center {
    display: flex;
    justify-content: space-between;
    .choosecircle-first {
      display: flex;
      align-items: center;
      .choosecircle-img {
        width: 50px;
        height: 50px;
      }
      .choosecircle-span {
        margin-left: 5px;
        .circle-name {
          margin-bottom: 5px;
        }
      }
    }
    .join {
      .add {
        width: 60px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        border-radius: 5px;
        color: #fd5151;
        border: 1px solid #fd5151;
      }
      .added {
        width: 60px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        border-radius: 5px;
        color: #fd5151;
        border: 1px solid #fd5151;
      }
    }
  }
}
.mycircle {
  width: 100%;
  // height: 231px;
  // border: 1px solid red;
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

  .mycircle-top {
    width: 100%;
    height: 40px;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #aeaeae;
    font-size: 16px;
    padding: 0 10px;
    .mycircle-circle {
      width: 60px;
      height: 20px;
      border-radius: 10px;
      background: rgb(255, 255, 255);
      text-align: center;
      line-height: 20px;
      font-size: 8px;
      cursor: pointer;
    }
  }
  .mycircle-center {
    width: 100%;
    // height: 191px;
    background-color: rgb(255, 255, 255);
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
    .mycircle-first {
      width: 100%;
      height: 60px;
      // background-color: rgb(54, 35, 35);
      // border: 1px solid red;
      display: flex;
      justify-content: flex-start;
      .mycircle-img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      .mycircle-span {
        width: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-wrap: wrap;
        > span {
          width: 100%;
          // border: 1px solid red;
        }
      }
    }
  }
}
// 内容
.center {
  width: 100%;
  margin-bottom: 9px;
  .container {
    width: 100%;
    // height: 350px;
    border-radius: 6px;
    background-color: #fff;

    .container-top {
      width: 100%;
      // height: calc(350px - 36px);
      padding-top: 12px;
      display: flex;
      justify-content: flex-start;
      .container-top-img {
        width: 28px;
        height: 100%;
        margin-left: 12px;
        > img {
          width: 28px;
          height: 28px;
          border-radius: 50%;
        }
      }
      .container-top-center {
        width: 100%;
        height: 100%;
        padding-right: 45px;
        .container-top-true {
          width: 100%;
          height: 100%;
          .container-top-title {
            width: 100%;
            height: 38px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 9px;
            .container-top-one {
              width: 100%;
              height: 14px;
              font-size: 8px;
              font-weight: 500;
              color: #333333;
              display: flex;
              align-items: center;
              justify-content: flex-start;

              .container-lable-yd {
                width: auto !important;
                padding: 0 6px;
                height: 11px;
                background: #fcf0f0;
                border-radius: 2px;
                width: 20px;
                font-size: 7px;
                font-weight: 400;
                color: #fd5151;
                line-height: 11px;
                margin-left: 10px;
              }
            }
            .container-top-two {
              width: 100%;
              display: flex;
              align-items: center;
              font-size: 7px;
              font-weight: 400;
              .fabu {
                color: #acacac;
                margin-left: 3px;
              }
            }
          }
          .container-contoin {
            margin-bottom: 12px;
            font-size: 8px;
            font-weight: 400;
            color: #333333;
            line-height: 14px;
            // border: 1px solid red;
          }
          .main-container {
            width: 100%;
            // height: 180px;
            margin-top: 20px;
            // background-color: #FD5151;
            display: flex;
            flex-wrap: wrap;
            .main-img {
              width: 32%;
              display: inline-block;
              // height: 86px;
              border-radius: 3px;
              margin-bottom: 7px;
              background-color: #dedede;
            }
          }
          .container-video {
            margin-top: 20px;
            width: 100%;
            // height: 313px;
            .video-bb {
              width: 100%;
             max-height: 200px;
            }
          }
        }
      }
    }
    .container-but {
      widows: 100%;
      // background-color: rgb(49, 103, 197);
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #ececec;
      .ribbon {
        width: 25%;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #ececec;
      }
      .npk {
        border-right: none;
      }
    }
  }
}
</style>
